﻿<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>反馈管理</title>
    <!--common-->
    <link href="/resources/src/css/admin.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="/resources/src/css/admin/main.css" />
	<link rel="stylesheet" href="/resources/src/css/admin/user-manage.css" />
	<style>
			.joModal-content{
				width:573px; height:435px; background-color:#ccc; padding:30px; box-sizing:border-box;
			}
			
			.joClose{
				position:absolute; right:6px;top:2px; font-size:20px;color:#4d4d4d; cursor:pointer;
			}
			.joClose:hover{color:#23a8f5;}
			
			.joModal-body{
				text-align:center; width:100%; height:375px; line-height:375px; overflow:hidden;
			}
			
			#screenshot{max-width:513px; height:auto; display:inline-block;}
		</style>
</head>
<body>
   <article class="main">
			<div class="main-wrapper">
				<section class="content">
				<form id="myForm" action="/admin/feedback/list">
					<div class="container">
						<div class="con-header">
							<div class="folderbar">反馈内容</div>
						</div>
						<div class="con-body">
							<div class="toolbar">
								<div class="toolbar-right clearfix">
									<div class="input-icon pull-left">
										<input type="text" id="condition" placeholder="输入用户名/手机/邮箱查询"/>
										<i class="iconfont icon-sousuo" id="searchFeedback"></i>
									</div>
									<div class="input-icon marleft pull-left">
										<div class="pull-left" style="position:relative;">
											<label for="date" class="iconfont icon-rili"></label>
											<span>创建时间：<span>
											<input type="hidden" id="createTime" value=""/>
											<input type="hidden" id="endTime" value=""/>
											<input type="text" id="date" placeholder="2017-12-11 14:12:13 - 2017-12-11 14:12:13"/>
										</div>
										<a class="pull-left" id="searchByDate" style="margin-left:20px;">查询</a>
									</div>
								</div>
							</div>
							<div class="user-table table-responsive">
								<table class="table">
									<thead>
										<tr>
											<th>反馈人</th>
											<th>反馈内容</th>
											<th>联系电话</th>
											<th>联系邮箱</th>
											<th>创建时间<i id="create-time" class="iconfont icon-paixu" data-order="0"></i></th>
											<th>截图</th>
											<th data-toggle="joDropdown">
												跟进情况<i class="iconfont icon-caidanshaixuan"></i>
												<ul data-toggle="joMenu">
													<li><a href="javascript:void(0);" onclick="selectStatus(0)"  value="0">全部</a></li>
													<li><a href="javascript:void(0);" onclick="selectStatus(1)" value="2">已处理</a></li>
													<li><a href="javascript:void(0);" onclick="selectStatus(2)" value="3">跟进中</a></li>
													<li><a href="javascript:void(0);" onclick="selectStatus(3)" value="4">未处理</a></li>
												</ul>
											</th>
										</tr>
									</thead>
									<tbody id="mytable">
										<c:forEach items="${pages.result }" var="feedback">
										<tr data-userId="255">
											<td>${feedback.userName }</td>
	                                       	<td>${feedback.content  }</td>
											<td>${feedback.phone }</td>
											<td>${feedback.email }</td>
											<td>${feedback.createTime }</td>
	                                       	<td><a  onclick="pic('${feedback.screenshot}')" data-src="/resources/src/images/20160315233954506.jpg">查看</a></td>
	                                       	<%-- <c:forEach items="${fn:split(feedback.screenshot,';') }" var="pic">
	                                       		<img alt="" src="http://www.vchello.cn/${pic }">
	                                       	</c:forEach> --%>
											<td>
												<%-- 
												<c:choose>
													<c:when test="${feedback.status==1 }">已处理</c:when>
													<c:when test="${feedback.status==2 }">跟进中</c:when>
													<c:when test="${feedback.status==3 }">未处理</c:when>
													<c:otherwise>全部</c:otherwise>
												</c:choose>--%>
												<select>
													<option value="0">全部</option>
													<option value="1">已处理</option>
													<option value="2">跟进中</option>
												</select>
											</td>
										</tr>
										</c:forEach>
										<tr>
										<td colspan="7" style="border:0"><jsp:include page="/common/adminPage.jsp" /></td>
										</tr>
									</tbody>
								</table>		
							</div>
						</div>
					</div>
					</form>
				</section>
			</div>
		</article>
		
		<!-- 查看截图模态框 -->
		<div class="joModal viewPic-modal" id="screenshot-modal" data-liffect="fadeIn">
			<div class="joModal-dialog">
				<div class="joModal-content" data-liffect="slideTop">
					<i class="iconfont icon-cuowu joClose" data-modal="close"></i>
					<div class="joModal-body">
						<img id="screenshot" src="/resources/src/images/qrcode.png" alt="截图"/>
						<img id="screenshot" src="/resources/src/images/qrcode.png" alt="截图"/>
					</div>
				</div>
			</div>	
		</div>
    
   		<script src="/resources/src/js/jquery-2.1.4.js"></script>
		<script src="/resources/src/js/bootstrap.min.js"></script>
		<script src="/resources/src/js/jquery.nicescroll.js"></script>
		<script src="/resources/src/js/admin/main.js"></script>
		<script src="/resources/src/js/moment.min.js"></script>
		<script src="/resources/src/js/daterangepicker.js"></script>
    <script>
        $(function(){
        	document.onkeydown = function(e){ 
        	    var ev = document.all ? window.event : e;
        	    if(ev.keyCode==13) {
        	    	var condition = $("#condition").val();
            		var createTime = $("#createTime").val();
            		var endTime = $("#endTime").val();
            		
            		$.ajax({
            			type:"post",
            			url:"/admin/feedback/list",
            			data:{"condition":condition,"endTime":endTime,"createTime":createTime},
            			success:function(data){
            				$("#mytable").html(data);
            			}
            		});
        	     }
        	}
        	
        	$("#searchFeedback").click(function(){
        		var condition = $("#condition").val();
        		var createTime = $("#createTime").val();
        		var endTime = $("#endTime").val();
        		
        		$.ajax({
        			type:"post",
        			url:"/admin/feedback/list",
        			data:{"condition":condition,"endTime":endTime,"createTime":createTime},
        			success:function(data){
        				$("#mytable").html(data);
        			}
        		});
        	})
        	
        	//日历选择器
			$('#date').daterangepicker({
			    timePicker:true,
			    timePicker24Hour:true,
			    timePickerSeconds:true,
			    parentEl:"#date-picker",
			    applyClass:"btn-primary",
			    opens:"center",
			    //本地化配置
			    locale : {  
			    	format: "YYYY-MM-DD HH:MM:SS",
			        applyLabel : '确定',  
			        cancelLabel : '取消',  
			        fromLabel : '起始时间',  
			        toLabel : '结束时间',  
			        customRangeLabel : '自定义',  
			        daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],  
			        monthNames : [ '1月', '2月', '3月', '4月', '5月', '6月',  
			                '7月', '8月', '9月', '10月', '11月', '12月' ],  
			        firstDay : 1  
			    }  
			}, function(start, end, label) {
				  //console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
			});
			
			//绑定日历事件，由日历"确认"按钮触发
			$('#date').on('apply.daterangepicker',function(ev, picker) {
				$("#createTime").val(picker.startDate.format('YYYY-MM-DD'));
				$("#endTime").val(picker.endDate.format('YYYY-MM-DD'));
			});
        })
        
        function selectStatus(status){
        	var condition = $("#condition").val();
    		var createTime = $("#createTime").val();
    		var endTime = $("#endTime").val();
    		
    		$.ajax({
    			type:"post",
    			url:"/admin/feedback/list",
    			data:{"condition":condition,"endTime":endTime,"createTime":createTime,"status":status},
    			success:function(data){
    				$("#mytable").html(data);
    			}
    		});
        }
        
        function pic(picValue) {
       	Global.modal(".viewPic-modal","show");
       	var html='';
       	var picArray = picValue.split(";");
       	for (var i = 0; i < picArray.length; i++) {
       		if(picArray[i] !='' && picArray[i] !=null) {
				html+="<img id='screenshot' src='http://www.vchello.cn/"+picArray[i]+"' alt='截图'/>";
       		}
		}
       	$(".joModal-body").html(html);
        }
    </script>
    
</body>
</html>